<template>
  <view class="answerImage">
    <up-grid :border="false" :col="col">
      <up-grid-item v-for="(listItem, listIndex) in imgs" :key="listIndex">
        <view
          :style="{
            width: gridWidth,
            height: gridWidth,
            marginBottom: imageSapce / 2.0 + 'rpx',
          }"
        >
          <image
            :src="getFileUrl(listItem)"
            mode="aspectFill"
            :style="{
              width: imgWidth,
              height: imgWidth,
              borderRadius: imageRadius + 'rpx',
              marginLeft:
                listIndex % col === 0 ? '0rpx' : imageSapce / 2.0 + 'rpx',
            }"
          >
          </image>
        </view>
      </up-grid-item>
    </up-grid>
  </view>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { getFileUrl } from "@/utils/util";

const props = defineProps({
  imgs: {
    type: Array,
    default: [],
  },
  left: {
    type: Number,
    default: 24,
  },
  col: {
    type: Number,
    default: 2,
  },
  imageRadius: {
    type: Number,
    default: 13,
  },
  imageSapce: {
    type: Number,
    default: 26,
  },
  imgWidth: {
    type: Number,
    default: 0,
  },
});

const gridWidth = computed(() => {
  return `calc((100vw - ${props.left * 2}rpx) / ${props.col})`;
});
const imgWidth = computed(() => {
  return `calc(100% - ${props.imageSapce / 2.0}rpx)`;
});
</script>

<style lang="scss" scoped></style>
